import React,{Component} from "react";
import "./Child02.css"
import classNames from 'classnames';//记得引入
export default class Child02 extends Component {
  state = {
    thList : [
      "编号",
      "产品",
      "单价",
      "销售数量",
      "质检",
      "操作方式"
    ], 
  }
  render(){
    // state = {}
    let  ths = this.state.thList.map((item,index) => {
      return <th key={index}> {item}</th>
    })
    let trs = Array(8).fill("").map((item, index) => {
      let count = Math.floor(Math.random() * 10);
      return (
        <tr key={index}>
          <td>{index}</td>
          <td>华为HIPlus{index+1}</td>
          <td>{(Math.random() * 10000).toFixed(2)}</td>
          <td>{count}</td>
          <td>{count > 5 ? "达标": count == 0 ? "不达标": "销售中"}</td>
          <td>
            {/* <button className={count <= 1 ? "btn" : count <=5 ? "btn btn-ing" : "btn btn-warning"}>{count == 1 ?  "入库中" : count <= 5 ? "销售中" : `仅剩${10-count}件`}</button> */}
            {/*使用classnames库  */}
            <button className={classNames({"btn":true, "btn-ing": count<1, "btn-warning": count <= 5})}>{count == 0 ? "待出库": count <=5 ? "销售中": `仅剩${10-count}件`}</button>
            {/* 使用三目运算 */}
            <button className={count < 1 ? "btn btn-ing": count <=5 ?"btn btn-warning": "btn" }>{count == 0 ? "待出库": count <=5 ? "销售中": `仅剩${10-count}件`}</button>
            {/* 对象形式, 数组形式 */}
            {/* todo */}
            {/* <button className={count < 1 ? "btn btn-ing": count <=5 ?"btn btn-warning": "btn" }>{count == 0 ? "待出库": count <=5 ? "销售中": `仅剩${10-count}件`}</button> */}
            
          </td>
        </tr>
      )
    })
    return(
      <>
      你好2
        <table>
          <thead>
            <tr>
              {ths}
            </tr>
          </thead>
          <tbody>
            {trs}
          </tbody>
        </table>
        
      </>
    )
  }
}